<template>
  <view class="upload-container">
    <!-- 顶部标题区域 -->
	<view class="container-max">
		

    <view class="header">
      <view class="title">上传安装完成视频</view>
    </view>

    <!-- 视频预览和上传区域 -->
    <view class="video-section">
	
      <view class="video-preview" @tap="selectVideo">

		  <view class="video-thumbnail">
		    <!-- 视频组件 -->
		    <video
		      :src="uploadResult.data.fullurl"
		      :controls="true"
		      :autoplay="false"
		      :loop="false"
		      :muted="false"
		      class="video-player"
		      @error="handleVideoError"
		    ></video>
		  </view>
        <view class="upload-area">
          <image class="upload-icon" src="/static/img/sioc.png"></image>
          <view class="upload-text">上传视频</view>
        </view>
      </view>
    </view>
	</view>
    <!-- 底部按钮区域 -->
  <view class="buttoncontainer">
     <view class="cancel-button" @click="cancelUpload">取消</view>
    
	 <view class="confirm-button" @click="confirmUpload">确定</view>
    </view>

  </view>
</template>

<script>
	import { Postuploaddata ,GetsetfinData} from '../../../api';
		let baseUrl = 'https://door.10906.cn/api/'
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
export default {
  data() {
    return {
      videoSelected: false,
      videoPath: '',
	    ceshiData: [],
		uploadResult:{},
		urls:'',
		ids:''
    };
  },
  onLoad(options) {
  	  // this.ids=options.id;
  	    console.log('id',options.id);
  	this.getbook();
  },
   components: {
              htzImageUpload,
          },
  methods: {
    // 选择视频
    selectVideo() {
		console.log('11111');
      const that = this;
      uni.chooseVideo({
        count: 1,
        mediaType: ['video'],
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: 'back',
		
        success(res) {
			
			// console.log('res',res)
			// 	console.log('res',res.path)
					console.log('res',res.tempFile.path )
          that.videoPath =res.tempFile.path 
		  // console.log('1111111',that.getBlobId(res.tempFilePath));
          that.videoSelected = true;
		    that.confirmUpload()
          // 这里可以添加视频预览逻辑
        },
        fail(err) {
          console.log('选择视频失败', err);
        }
      });
    },
	 getBlobId(blobUrl) {
	  if (!blobUrl || typeof blobUrl !== 'string') {
	    return '';
	  }
	  
	  // 以斜杠分割URL，取最后一部分
	  const parts = blobUrl.split('/');
	  return parts[parts.length - 1] || '';
	},
    // 取消上传
    cancelUpload() {
      uni.navigateBack();
    },
    // 确认上传
 async   confirmUpload() {
	       

		   
		   
       if (!this.videoPath) return;
         
         uni.uploadFile({
           url: baseUrl + `common/upload`,
           filePath: this.videoPath, // 要上传的文件临时路径
           name: 'file', // 后端接收文件的参数名（与后端约定）
           method: 'POST',
           data: {
           	platform: 'WechatOfficialAccount'
           },
		   header:{
			   token:localStorage.getItem('token')
		   },
           // 额外的表单数据（可选）
           // formData: {
           //   'user_id': '123',
           //   'file_type': 'image'
           // },
           
           // 上传进度回调
           onProgressUpdate: (res) => {
             this.progress = res.progress; // 更新进度
             console.log('上传进度：' + res.progress + '%');
           },
           
           // 上传成功
           success: (uploadRes) => {
             // 后端返回的结果（通常是JSON字符串）
			 console.log('uploadres',uploadRes.data);
             const result = JSON.parse(uploadRes.data);
			  this.uploadResult =result
             // this.uploadResult = JSON.stringify(result, null, 2);
             console.log('uploadresult111', this.uploadResult.data.fullurl);
             if (result.code === 1) {
               uni.showToast({
                 title: '上传成功',
                 icon: 'success'
               });
			   

				// uni.navigateTo({
				//  url: `/pages/my/components/rook`,				     
				// });
             } else {
               uni.showToast({
                 title: '上传失败: ' + result.msg,
                 icon: 'none'
               });
             }
           },
           
           // 上传失败
           fail: (err) => {
             console.error('上传失败：', err);
             uni.showToast({
               title: '上传失败，请重试',
               icon: 'none'
             });
             this.progress = 0;
           }
         });
    },
	async confirmUploads(){
		let res=await   GetsetfinData({ids:this.ids,video:this.uploadResult.data.url});
		if(res.code==1){
			uni.switchTab({
			   url: `/pages/resmy/resmy`
			 });
		}
	},
	    // 处理视频加载错误
	    handleVideoError(e) {
	      console.error('视频加载失败:', e.detail);
	      uni.showToast({
	        title: '视频加载失败',
	        icon: 'none'
	      });
	    }
  }
}
</script>

<style lang="scss">
/* 样式变量定义 */
$primary-color: #FF0101;
$text-color: #2D3046;
$text-secondary: #7A8195;
$background-color: #FFFFFF;
$border-color: #F0F0F0;
$border-radius: 20rpx;
$padding-base: 30rpx;
$font-large: 32rpx;
$font-medium: 28rpx;
$font-small: 26rpx;

// 主容器样式
.upload-container {
background: #F7F8FA;
  min-height: 100vh;
  padding: 24rpx 20rpx;
  box-sizing: border-box;
}
.container-max{
	width: 710rpx;
	height: 296rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	padding: 38rpx 24rpx;
	box-sizing: border-box;
}
// 顶部标题区域
.header {


  .title {
  font-size: 28rpx;
  color: #000;
    font-weight: bold;
  }
}

// 视频预览和上传区域
.video-section {
 
  box-sizing: border-box;

  .video-preview {
    width: 100%;
    height: 200rpx;
	margin-top: 32rpx;
    // background-color: #F5F5F5;
    border-radius: $border-radius;
    display: flex;
    // align-items: center;
    // padding: 20rpx;
    box-sizing: border-box;

    .video-thumbnail {
      width: 142rpx;
      height: 142rpx;
	  // width: 800rpx;
	  // height: 400rpx;
      border-radius: 10rpx;
  box-sizing: border-box;
	  .video-player {
     width: 142rpx;
      height: 142rpx;
}
    }

    .upload-area {
      // flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
	  border-radius: 10rpx;
	  background-color: #F9F9F9;
      justify-content: center;
      margin-left: 26rpx;
     width: 142rpx;
	 height: 142rpx;
      .upload-icon {
        width: 40rpx;
        height: 28rpx;
        margin-bottom: 10rpx;
      }

      .upload-text {
        font-size:28rpx;
        color: #7A8195;
      }
    }
  }
}

// 底部按钮区域
.buttoncontainer {
width: 670rpx;
margin-left: 20rpx;
 display: flex;
  justify-content: center;
  position: fixed;
  bottom: 42rpx;
  
.cancel-button{
	width: 310rpx;
	height: 88rpx;
	color: #B9BEC2;
	border-radius: 44rpx;
	border: 2rpx solid #B9BEC2;
	text-align: center;
	line-height: 88rpx;
}
.confirm-button{
	margin-left: 40rpx;
	width: 310rpx;
	height: 88rpx;
	text-align: center;
	line-height: 88rpx;
	color: #fff;
	background: linear-gradient( 163deg, #FF544F 0%, #F11C00 100%);
	border-radius: 44rpx;
}

}
</style>